<template>
	<view class="content">
    <div class="topInput">
      <u--form
        labelPosition="left"
        :model="deviceModel"
        :rules="rules"
        labelWidth="80px"
        ref="uForm"
      >
        <u-form-item
            label="设备名称"
            prop="userInfo.name"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="deviceModel.userInfo.name"
              disabled
              border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="备注"
            prop="userInfo.remark"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="deviceModel.userInfo.remark"
              disabled
              border="none"
          ></u--input>
        </u-form-item>
      </u--form>
    </div>
    <div class="MainBody">
      <div class="listArr" v-for="(item,index) in originArr" :key="index">
        名称:{{ item.name }},类型:{{ item.deviceType === 0 ? '网关' : item.deviceType === 1 ? '温湿度' : item.deviceType === 2 ? '开关' : '土壤温湿度' }}
      </div>
    </div>
    <div class="middleBox">
    </div>
    <div class="MainBody">
      <div class="listArr" v-for="(item,index) in downStartData" :key="index">
        名称:{{ item.name }},类型:{{ item.deviceType === 0 ? '网关' : item.deviceType === 1 ? '温湿度' : item.deviceType === 2 ? '开关' : '土壤温湿度' }}
      </div>
    </div>
    <view class="lastForSwitch">
      <view class="fir" @click="detailRulePage" v-show="buttonTAG && haveRULR">查看规则详情</view>
      <view class="fir" @click="addRulePage" v-show="!buttonTAG && haveRULR">新增规则详情</view>
      <view class="sen" @click="goback">返回上一页</view>
    </view>
	</view>
</template>

<script>
  import { timestampToDatetime } from '@/untils/index';
  import request from '@/request/api';
	export default {
    filters: {
      setTime(val){
        return timestampToDatetime(val)
      },
      setPhone(val){
        return val.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
      }
		},
		data() {
			return {
        ruleGroupID: null,
        buttonTAG: true,
        haveRULR: true,
        groupId: '',
        originArr: [],
        toDownData: [],
        toTopData: [],
        downStartData: [],
        deviceModel: {
          userInfo: {
            name: '',
            remark: '',
          },
        },
        rules: {
          'userInfo.name': {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change']
          },
        },
				messageObj:{}
			}
		},
    components: {
      
		},
		onLoad(e) {
      this.groupId = e.id
		},
    onShow(){
      this.getDownData()
    },
		methods: {
      addRulePage(){
        uni.navigateTo({
          url:`./addRule?id=${this.groupId}`
        })
      },
      detailRulePage(){
        uni.navigateTo({
          url:`./updateRule?id=${this.groupId}&DELETEID=${this.ruleGroupID}`
        })
      },
      getRuleDetail(){
        let obj = {
          url: '/componentRule/detail',
          method: 'get',
          data: {
            componentId: this.groupId
          }
        }
        request(obj).then(res => {
          if (res.code === '200') {
            this.buttonTAG = res.data === null ? false : true
            
            this.ruleGroupID = res.data === null ? null : res.data.id
          } else {
            uni.showToast({
              title: res.message,
              mask: true
            })
          }
        })

      },
      getDownData(){
        let obj = {
          url: '/deviceComponent/detail',
          method: 'get',
          data: {
            componentId: this.groupId
          }
        }
        request(obj).then(res => {
          if (res.code === '200') {
            this.getRuleDetail()
            let tranArr = res.data.deviceList
            let recodenum = 0
            for (const el of tranArr) {
              el.isChecked = false
              if (el.deviceType === 0) {
                recodenum++
              }
            }
            if (recodenum === tranArr.length) {
              this.haveRULR = false
            }
            this.downStartData = tranArr
            this.deviceModel.userInfo.name = res.data.componentName
            this.deviceModel.userInfo.remark = res.data.remark
            this.getTopData()
          } else {
            uni.showToast({
              title: res.message,
              mask: true
            })
          }
        })
      },
      getTopData(){
        let options = {
          url: '/device/list',
          method: 'GET',
          data: {
            limit: 5,
            page: 1,
          }
        }
        request(options).then((result)=> {
          if (result.code === '200') {
            let total = result.data.total
            let optionsForAllList = {
              url: '/device/list',
              method: 'GET',
              data: {
                limit: total,
                page: 1,
              }
            }
            request(optionsForAllList).then((res) => {
              
              const arr = res.data.records
              const nullArr = []
              for (const el of arr) {
                el.isChecked = false
                nullArr.push(el)
              }
              const setArr = []
              for (const el of nullArr) {
                let flag = true
                for (const j of this.downStartData) {
                  if (el.id === j.id) {
                    flag = false
                  }
                }
                if (flag) {
                  setArr.push(el)
                }
              }
              this.originArr = setArr
            })
          }
        })
      },
      dataToTop(val){
        if (val === 0) {
          return false
        } else {
          const nullArr = []
          for (const el of this.downStartData) {
            let flag = true
            for (const j of this.toTopData) {
              if (el.id === j.id) {
                flag = false
              }
            }
            if (flag) {
              nullArr.push(el)
            }
          }
          this.downStartData = nullArr
          for (const el of this.toTopData) {
            el.isChecked = false
            this.originArr.push(el)
          }
          this.toTopData = []
        }
      },
      dataToDown(val){
        if (val === 0) {
          return false
        } else {
          const nullArr = []
          for (const el of this.originArr) {
            let flag = true
            for (const j of this.toDownData) {
              if (el.id === j.id) {
                flag = false
              }
            }
            if (flag) {
              nullArr.push(el)
            }
          }
          this.originArr = nullArr
          for (const el of this.toDownData) {
            el.isChecked = false
            this.downStartData.push(el)
          }
          this.toDownData = []
        }
      },
      changeInRightFun(index){
        if (!this.downStartData[index].isChecked) {
          this.downStartData[index].isChecked = true
          if (this.toTopData.length > 0) {
            let tag = false
            for (const el of this.toTopData) {
              if (this.downStartData[index].id === el.id) {
                tag = true
                return false
              }
            }
            if (!tag) {
              this.toTopData.push(this.downStartData[index])
            }
            
          } else {
            this.toTopData.push(this.downStartData[index])
          }
        } else {
          this.downStartData[index].isChecked = false
          let recodeArr = []
          recodeArr = this.toTopData.filter(item => {
            return item.id !== this.toTopData[index].id
          })
          this.toTopData = recodeArr
        }
      },
      changeInleftFun(index){
        if (!this.originArr[index].isChecked) {
          this.originArr[index].isChecked = true
          if (this.toDownData.length > 0) {
            let tag = false
            for (const el of this.toDownData) {
              if (this.originArr[index].id === el.id) {
                tag = true
                return false
              }
            }
            if (!tag) {
              this.toDownData.push(this.originArr[index])
            }
            
          } else {
            this.toDownData.push(this.originArr[index])
          }
        } else {
          this.originArr[index].isChecked = false
          let recodeArr = []
          recodeArr = this.toDownData.filter(item => {
            return item.id !== this.originArr[index].id
          })
          this.toDownData = recodeArr
        }
      },
      goback(){
        uni.navigateBack()
      },
      submitSwitch(){
        
      }
		}
	}
</script>

<style lang="scss">
.listArr {
  width: 90%;
  height: 80rpx;
  display: flex;
  line-height: 80rpx;
}
.topInput {
  margin: 0 3% 20rpx 3%;
  width: 94%;
}
.MainBody {
  padding: 20rpx 2%;
  margin: 0 3% 20rpx 3%;
  width: 89%;
  height: calc(35vh - 40rpx);
  border: 1rpx solid #000;
  overflow-y: scroll;
}
.middleBox {
  width: 100%;
  display: flex;
  justify-content: center;
  .imgBox {
    width: 80rpx;
    height: 80rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

.lastForSwitch {
  margin-top: 30rpx;
  width: 100%;
  display: flex;
  justify-content: space-around;
  .fir {
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #fff;
  }
  .sen {
    width: calc(30% - 2rpx);
    height: calc(80rpx - 2rpx);
    line-height: 78rpx;
    text-align: center;
    border-radius: 10rpx;
    border: 1rpx solid #909399;
    color: #000;
  }
}
</style>
